<!-- 动态页面 -->
<template>
    <div class="CircleView" @click="hideInput($event)">
        <TopBackground :userInfo="user">
            <template #topRightIcon>
                <svg class="icon" aria-hidden="true" @click="$router.push('editDynamics')">
                    <use xlink:href="#icon-zhaoxiangji"></use>
                </svg>
            </template>
        </TopBackground>
        <DynamicCell
            v-for="(item, index) in dynamic_G" 
            :key="index"
            :dynamic="item"
            :userInfo="getUserInfo(item.phone)"
            class="DynamicCell"
            ref="DynamicCell"
        />
    </div>
</template>

<script>
    import TopBackground from "@/components/common/topBackground.vue";
    import DynamicCell from "@/components/common/dynamicCell.vue";
    import { mapState } from "vuex";

    export default {
        name: "CircleView",
        components: {
            TopBackground,
            DynamicCell,
        },
        computed: {
            ...mapState(['user', 'friendList']),
            ...mapState('userInfo', ['dynamic_G']),
        },
        methods: {
            hideInput(event) {
                const bottomRefs = this.$refs.DynamicCell;
                // 遍历 $refs.DynamicCell 数组，因为可能有多个 DynamicCell 组件
                for (let i = 0; i < bottomRefs.length; i++) 
                {
                    const DynamicCell = bottomRefs[i];
                    const inputRef = DynamicCell.$refs.Input;
                    const pickerRef = DynamicCell.$refs.Picker;
                    if (inputRef && pickerRef) 
                    {
                        // 检查点击事件的 target 是否不在 Input 和 Picker 的内部
                        if (!inputRef.$el.contains(event.target) && !pickerRef.$el.contains(event.target)) 
                        {
                            DynamicCell.showInput = false;
                        }
                    }
                }
            },
            getUserInfo(value) {
                let index = this.friendList.findIndex(item => item.friendId.phone == value)
                if (index != -1) {
                    let { nickname, headImgUrl } = this.friendList[index].friendId;
                    return { nickname, headImgUrl };
                }
            }
        },
    };
</script>

<style lang="less" scoped>
    .CircleView {
        height: calc(100vh - 3.125rem);
        width: 100%;
        overflow-y: scroll;
    }
</style>
